<template>
  <view class="wrap">
    <scroll-view
      class="scroll-X"
      :scroll-x="true"
      :scroll-with-animation="true"
      :scroll-into-view="tabId"
    >
      <view class="tabList">
        <view
          :id="'scroll_' + index"
          :class="['item', tabIndex == index ? 'on' : '']"
          v-for="(item, index) in tabList"
          :key="index"
          @tap="tabChange(index)"
        >
          {{ item.remark }}
        </view>
      </view>
    </scroll-view>
    <swiper
      class="swiper"
      :current="tabIndex"
      :indicator-dots="false"
      :autoplay="false"
      :duration="0"
      @change="($event) => tabChange($event.detail.current)"
    >
      <swiper-item @touchmove.stop="false" v-for="(page, index) in List" :key="index">
        <my-list
          class="list"
          :pageInfo="pageInfo[index]"
          @onLoadmore="onLoadmore"
          @onReload="getList"
          :refresherEnabled="true"
          @onReset="onReset"
          EmptyText="暂无数据"
        >
          <view class="item" v-for="(item, i) in page" :key="i" @tap="goDetail(item)">
            <view class="title"> {{ item.title }}</view>
            <text class="content" v-if="item.summary">
              {{ item.summary }}
            </text>
            <view class="listImg cf" v-if="item && item.picList && item.picList.length > 0">
              <view class="coverImg" v-for="(itemTwo, k) in item.picList" :key="k">
                <image class="img" mode="scaleToFill" :src="itemTwo" />
              </view>
            </view>
          </view>
        </my-list>
      </swiper-item>
    </swiper>
    <qiun-data-charts />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { articleType, educationList } from '@/module/api/popularScience'
import MyList from '@/module/components/MyList/MyList.vue'
import store from '@/store'

const tabIndex = ref(0)
const tabList = ref([])

const tabId = ref('')

const tabChange = (i) => {
  if (tabIndex.value !== i) {
    tabIndex.value = i

    const c = i - 2
    if (c > 0) {
      tabId.value = 'scroll_' + c
    } else {
      tabId.value = 'scroll_' + 0
    }
    // tabId.value = 'scroll_' + i

    const pageinfo = pageInfo.value[tabIndex.value]
    if (pageinfo.status === 'loading' || pageinfo.status === '') {
      getList()
    }
  }
}

const pageInfo = ref([])
const List = ref([])

onLoad(() => {
  articleType().then((res) => {
    if (res.code == 0) {
      if (res.data.length) {
        tabList.value = res.data
        List.value = new Array(res.data.length).fill(0).map((v) => [])
        pageInfo.value = new Array(res.data.length).fill(0).map((v) => {
          return {
            page: 1,
            limit: 10,
            scroll: false,
            status: 'loading',
            triggered: false
          }
        })
        getList()
      } else {
        tabList.value = []
        List.value = []
        pageInfo.value = []
      }
    }
  })
})

const getList = () => {
  const pageinfo = pageInfo.value[tabIndex.value]
  const t = tabIndex.value

  pageinfo['status'] = 'loading'
  pageinfo['scroll'] = false

  const param = {
    page: pageinfo.page,
    limit: pageinfo.limit,
    categoryName: tabList.value[t].remark,
    empi: store.state.userInfo.empi
  }

  educationList(param)
    .then((res) => {
      if (res.data) {
        const list = res.data.list
        if (list.length < pageinfo['limit']) {
          pageinfo['scroll'] = false

          if (pageinfo['page'] === 1) {
            if (list.length === 0) {
              pageinfo['status'] = 'nodata'
              List.value[t] = []
            } else {
              pageinfo['status'] = 'nomore'
              List.value[t] = [...list]
            }
          } else {
            pageinfo['status'] = 'nomore'
            if (list.length === 0) {
              List.value[t] = [...list]
            } else {
              List.value[t] = [...List.value[t], ...list]
            }
          }
        } else {
          pageinfo['scroll'] = true
          pageinfo['status'] = 'loadmore'
          if (list.length === 0) {
            List.value[t] = [...list]
          } else {
            List.value[t] = [...List.value[t], ...list]
          }
        }
      } else {
        pageinfo['status'] = 'error'
      }
    })
    .catch((e) => {
      pageinfo['status'] = 'error'
    })
    .finally((e) => {
      if (pageinfo['triggered']) {
        pageinfo['triggered'] = false
      }
    })
}

const onLoadmore = () => {
  const pageinfo = pageInfo.value[tabIndex.value]

  if (pageinfo['scroll']) {
    pageinfo.page++
    getList()
  }
}

const onReset = () => {
  const pageinfo = pageInfo.value[tabIndex.value]
  pageinfo['triggered'] = true
  pageinfo['status'] = 'loading'
  pageinfo['scroll'] = false
  List.value[tabIndex.value] = []
  pageInfo.value.page = 1
  setTimeout(() => {
    getList()
  }, 1000)
}

const goDetail = (item) => {
  uni.navigateTo({ url: '/module/popularScience/detail?id=' + item.id })
}
</script>

<style lang="scss" scoped>
.cf {
  zoom: 1;
}

.cf::after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  visibility: hidden;
  content: '.';
}

.wrap {
  min-height: 100vh;
  padding-bottom: 0;

  .scroll-X {
    background: #fff;

    .tabList {
      width: auto;
      white-space: nowrap;

      .item {
        position: relative;
        display: inline-block;
        width: 140rpx;
        height: 84rpx;
        font-size: 30rpx;
        line-height: 84rpx;
        color: #666;
        text-align: center;
        vertical-align: middle;

        &:nth-last-child(1) {
          margin-right: 0;
        }

        &.on {
          font-size: 36rpx;
          font-weight: 700;
          color: #222;

          &::after {
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 24rpx;
            height: 6rpx;
            content: '';
            background: #00d1b6;
            border-radius: 3rpx;
            transform: translateX(-50%);
          }
        }
      }
    }
  }

  .swiper {
    height: calc(100vh - 92rpx);
  }

  .list {
    .item {
      padding: 32rpx;
      margin-top: 24rpx;
      font-size: 32rpx;
      font-weight: 700;
      color: #222;
      background: #fff;
      border-radius: 16rpx;

      &:nth-child(1) {
        margin-top: 0;
      }

      .content {
        display: -webkit-box;
        margin-top: 16rpx;
        overflow: hidden;
        font-size: 28rpx;
        font-weight: 400;
        color: #666;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2; /* 省略几行写几 */
        -webkit-box-orient: vertical;
      }

      .listImg {
        margin-top: 16rpx;

        .coverImg {
          float: left;
          width: calc(33.3% - 16rpx);
          height: 128rpx;
          margin-right: 22rpx;

          &:nth-child(3) {
            margin-right: 0;
          }

          .img {
            display: block;
            width: 100%;
            height: 128rpx;
            border-radius: 4rpx;
          }
        }
      }
    }
  }
}
</style>